<template>
<div class="bodys">
    <div class="header">
    Echart 炫酷图表
    <a href="javascript:;" class="a-access">
        <button class="button type1">
    		返回
    	</button>
    </a>
    </div>
    <!--主体-->
    <div class="main clearfix">
    <div class="main-left">
        <div class="border-container">
            <div class="name-title">
                ===
            </div>
            <div id="radar" _echarts_instance_="ec_1553150766460" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 474px; height: 275px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="474" height="275" style="position: absolute; left: 0px; top: 0px; width: 474px; height: 275px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 195px; top: -16px; pointer-events: none;">第二标准<br>test1 : 5000<br>test2 : 14000<br>test3 : 28000<br>test4 : 31000<br>test5 : 42000<br>test6 : 21000</div></div>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
        <div class="border-container">
            <div class="name-title">
               ===
            </div>
            <div id="graduateyear" _echarts_instance_="ec_1553150766461" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 474px; height: 192px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="474" height="192" style="position: absolute; left: 0px; top: 0px; width: 474px; height: 192px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 221px; top: 50px; pointer-events: none;">2027年<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#72b332;"></span>test1: 1,256<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#35a9e0;"></span>test2: 900</div></div>
            <ul class="three-pie clearfix">
                <li>
                    <div id="sexrate" _echarts_instance_="ec_1553150766462" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 246px; height: 266px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="246" height="266" style="position: absolute; left: 0px; top: 0px; width: 246px; height: 266px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 0px; top: 109px; pointer-events: none;">PK <br>test1 : 2629 (51.19%)</div></div>
                </li>
                <li>
                    <div id="householdrate" _echarts_instance_="ec_1553150766463" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 247px; height: 266px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="247" height="266" style="position: absolute; left: 0px; top: 0px; width: 247px; height: 266px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px &quot;Microsoft YaHei&quot;; padding: 5px; left: -43px; top: 70px; pointer-events: none;">FK <br>test1 : 2629 (51.19%)</div></div>
                </li>
            </ul>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
    </div>
    <div class="main-middle">
        <div class="border-container">
            <div id="mapadd" _echarts_instance_="ec_1553150766469" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 769px; height: 304px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="769" height="304" style="position: absolute; left: 0px; top: 0px; width: 769px; height: 304px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 208px; top: 147px; pointer-events: none;">聊城市</div></div>
            <div class="number-show">
                <ul>
                    <li>
                        <span class="span-name">第一标准</span>
                    </li>
                    <li>
                        <span class="span-number-show">653</span>
                    </li>
                    <li>
                        <span class="span-name">第二标准</span>
                    </li>
                    <li>
                        <span class="span-number-show">836252</span>
                    </li>
                    <li>
                        <span class="span-name">第三标准</span>
                    </li>
                    <li>
                        <span class="span-number-show">32162</span>
                    </li>
                </ul>
            </div>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
        <div class="border-container">
            <ul class="teacher-pie clearfix">
                <li>
                    <div class="name-title">
                        =======
                    </div>
                    <div id="courserate" _echarts_instance_="ec_1553150766464" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 393px; height: 200px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="393" height="200" style="position: absolute; left: 0px; top: 0px; width: 393px; height: 200px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 81px; top: 56px; pointer-events: none;">FK <br>test4 : 135 (9.11%)</div></div>
                </li>
                <li>
                    <div class="name-title">
                       =======
                    </div>
                    <div id="professionrate" _echarts_instance_="ec_1553150766465" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 394px; height: 200px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="394" height="200" style="position: absolute; left: 0px; top: 0px; width: 394px; height: 200px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 84px; top: 92px; pointer-events: none;">FK <br>test2 : 310 (35.27%)</div></div>
                </li>
            </ul>

            <div class="name-title">
                ===
            </div>
            <div id="changedetail" _echarts_instance_="ec_1553150766466" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 769px; height: 229px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="769" height="229" style="position: absolute; left: 0px; top: 0px; width: 769px; height: 229px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 141px; top: 92px; pointer-events: none;">2021年<br>test1: 2<br>test2: 1</div></div>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
    </div>
    <div class="main-right">
        <div class="border-container">
            <div class="name-title">
                ===
            </div>
           <table class="table table-kingdargen">
               <thead>
                   <tr>
                       <th>test1</th>
                       <th>test2</th>
                       <th>test3</th>
                       <th>test4</th>
                       <th>test5</th>
                   </tr>
               </thead>
               <tbody>
                   <tr>
                       <td>a</td>
                       <td>268</td>
                       <td>212</td>
                       <td>342</td>
                       <td>256</td>
                   </tr>
                   <tr>
                       <td>b</td>
                       <td>268</td>
                       <td>212</td>
                       <td>342</td>
                       <td>256</td>
                   </tr>
                   <tr>
                       <td>c</td>
                       <td>268</td>
                       <td>212</td>
                       <td>342</td>
                       <td>256</td>
                   </tr>
                   <tr>
                       <td>d</td>
                       <td>268</td>
                       <td>212</td>
                       <td>342</td>
                       <td>256</td>
                   </tr>
                   <tr>
                       <td>e</td>
                       <td>268</td>
                       <td>212</td>
                       <td>342</td>
                       <td>256</td>
                   </tr>
                   <tr>
                       <td>f</td>
                       <td>268</td>
                       <td>212</td>
                       <td>342</td>
                       <td>256</td>
                   </tr>
                   <tr>
                       <td>g</td>
                       <td>268</td>
                       <td>212</td>
                       <td>342</td>
                       <td>256</td>
                   </tr>
                   <tr>
                       <td>h</td>
                       <td>268</td>
                       <td>212</td>
                       <td>342</td>
                       <td>256</td>
                   </tr>
                   <tr>
                       <td>i</td>
                       <td>268</td>
                       <td>212</td>
                       <td>342</td>
                       <td>256</td>
                   </tr>
                   <tr>
                       <td>k</td>
                       <td>268</td>
                       <td>212</td>
                       <td>342</td>
                       <td>256</td>
                   </tr>
                   <tr>
                       <td>k</td>
                       <td>268</td>
                       <td>212</td>
                       <td>342</td>
                       <td>256</td>
                   </tr>
                   <tr>
                       <td>k</td>
                       <td>268</td>
                       <td>212</td>
                       <td>342</td>
                       <td>256</td>
                   </tr>
                   <tr>
                       <td>k</td>
                       <td>268</td>
                       <td>212</td>
                       <td>342</td>
                       <td>256</td>
                   </tr>
               </tbody>
           </table>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
        <div class="border-container">
            <div class="name-title">
             	===
            </div>
          <div id="juniorservice" _echarts_instance_="ec_1553150766467" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 474px; height: 190px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="474" height="190" style="position: absolute; left: 0px; top: 0px; width: 474px; height: 190px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
        <div class="border-container">
            <div class="name-title">
                ===
            </div>
            <div id="edubalance" _echarts_instance_="ec_1553150766468" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 474px; height: 203px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="474" height="203" style="position: absolute; left: 0px; top: 0px; width: 474px; height: 203px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
    </div>
    </div>
</div>
</template>

<script src="../../../uitls/jquery.min.js" ></script>
<script src="../../../uitls/echarts.min.js" ></script>
<script src="../../../uitls/index.js" ></script>
<script src="../../../uitls/map/shandong.js" ></script>


<script>
import $ from 'jquery'
export default {
    

}
</script>

<style scoped>
    @import '../../assets/css/index.css';
</style>





